<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<p>支付成功</p>
		</header>

		<!-- 成功图标 -->
		<div class="business-logo">
			<img src="../assets/success.png">
		</div>

		<!-- 成功信息 -->
		<div class="success-message">
			<h2>支付成功！</h2>
			<p>感谢您的购买</p>
		</div>

		<!-- 返回首页 -->
		<div class="return-button">
			<button @click="toIndex">返回首页</button>
		</div>

		<!-- 底部菜单部分 -->
		<Footer></Footer>
	</div>
</template>

<script>
	import Footer from '../components/Footer.vue';

	export default {
		name: 'PaySuccess',
		components: {
			Footer
		},
		data() {
			return {
				loading: false,
				error: null
			}
		},
		async created() {
			// 页面加载时清空购物车
			await this.clearCart();
		},
		methods: {
			// 清空购物车
			async clearCart() {
				this.loading = true;
				this.error = null;
				
				try {
					const user = this.$getSessionStorage('user');
					if (!user || !user.userId) {
						console.log('用户未登录，无需清空购物车');
						return;
					}

					// 调用清空购物车接口
					const response = await this.$axios.delete('/api/carts', {
						params: {
							userId: user.userId
						}
					});
					
					if (response.data.success) {
						console.log('购物车已清空');
					} else {
						throw new Error(response.data.message || '清空购物车失败');
					}
				} catch (error) {
					console.error('清空购物车失败:', error);
					this.error = '清空购物车失败: ' + (error.response?.data?.message || error.message);
					// 这里可以选择不提示用户，因为支付已经成功了
				} finally {
					this.loading = false;
				}
			},
			
			// 返回首页
			toIndex() {
				this.$router.push('/index');
			}
		}
	}
</script>

<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	/****************** 成功图标部分 ******************/
	.wrapper .business-logo {
		width: 100%;
		height: 35vw;
		margin-top: 20vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.wrapper .business-logo img {
		width: 40vw;
		height: 40vw;
	}

	/****************** 成功信息部分 ******************/
	.wrapper .success-message {
		text-align: center;
		margin: 5vw 0;
	}

	.wrapper .success-message h2 {
		font-size: 5vw;
		color: #38CA73;
		margin-bottom: 2vw;
	}

	.wrapper .success-message p {
		font-size: 3.8vw;
		color: #666;
	}

	/****************** 返回按钮部分 ******************/
	.wrapper .return-button {
		width: 100%;
		padding: 0 4vw;
		box-sizing: border-box;
		margin-top: 10vw;
	}

	.wrapper .return-button button {
		width: 100%;
		height: 12vw;
		border: none;
		outline: none;
		border-radius: 6px;
		background-color: #38CA73;
		color: #fff;
		font-size: 4.5vw;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.3s;
	}

	.wrapper .return-button button:hover {
		background-color: #2db863;
		transform: translateY(-2px);
		box-shadow: 0 4px 8px rgba(56, 202, 115, 0.3);
	}

	/****************** 响应式设计 ******************/
	@media (min-width: 768px) {
		.wrapper header {
			height: 60px;
			font-size: 20px;
		}
		
		.wrapper .business-logo {
			height: 200px;
			margin-top: 100px;
		}
		
		.wrapper .business-logo img {
			width: 150px;
			height: 150px;
		}
		
		.wrapper .success-message h2 {
			font-size: 24px;
		}
		
		.wrapper .success-message p {
			font-size: 18px;
		}
		
		.wrapper .return-button {
			padding: 0 20px;
			margin-top: 50px;
		}
		
		.wrapper .return-button button {
			height: 50px;
			font-size: 18px;
			max-width: 400px;
			margin: 0 auto;
			display: block;
		}
	}
</style>